<template>
	<div class="fast-link-com w-24 relative">
		<div
			class="res-item w-full rounded-lg flex flex-col items-center justify-center cursor-pointer py-2">
			<div
				class="icon w-11 h-11 p-2 bg-white rounded-xl shadow-md flex items-center justify-center">
				<nuxt-img width="23" height="23" :src="icon" />
			</div>
			<div
				class="name w-full text-center text-xs mt-2 text-gray-600 truncate"
				:title="`${name} | ${link}`">
				{{ name }}
			</div>
			<div class="control h-full absolute top-0 right-0 hidden flex-col">
				<div class="edit transition duration-300 text-blue-300 hover:text-blue-500" title="编辑">
					<icon name="material-symbols:edit-square-outline" :size="15" />
				</div>
				<div class="delete transition duration-300 text-red-300 hover:text-red-500" title="删除">
					<icon name="material-symbols:close-rounded" :size="16" />
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
export default defineComponent({
	name: 'FastLink',
	props: {
		icon: {
			type: String,
		},
		name: {
			type: String,
		},
		link: {
			type: String,
		},
	},
});
</script>

<style lang="scss" scoped>
.res-item {
	&:hover {
		.control {
			display: flex;
		}
	}
}
</style>
